<template>
	<view>
		<!-- 话题信息 -->
		<topic-info :topicInfo="topicInfo"></topic-info>
		<!-- tab切换 -->
		<swiper-tab-head 
		:tabBars="tabBars" 
		:tabIndex="tabIndex" 
		@tabtap="tabtap" 
		:scrollStyle="scrollStyle" 
		:scrollBlockStyle="scrollBlockStyle"></swiper-tab-head>
		<!-- 列表 -->
		<view class="topic-detail-list">
			<block v-for="(item, index) in tabList" :key="index">
				<template v-if="tabIndex === index">
					<!-- 列表 -->
					<block v-for="(detail, detailIndex) in item.list" :key="detailIndex">
						<common-list :item="detail" :index="detailIndex"></common-list>
					</block>
					<!-- 上拉加载 -->
					<load-more :loadtext="item.loadtext"></load-more>
				</template>
			</block>
		</view>
	</view>
</template>

<script>
	import topicInfo from '../../components/topic/topic-info.vue';
	import swiperTabHead from '../../components/index/swiper-tab-head.vue';
	import commonList from '../../components/common/common-list.vue';
	import loadMore from '../../components/common/load-more.vue';
	export default {
		components:{
			topicInfo,
			swiperTabHead,
			commonList,
			loadMore,
		},
		data() {
			return {
				topicInfo:{
					cover: '../../static/images/cbd.jpg',
					title:'忆往事，敬余生',
					desc:'面试官：在电梯中巧遇马云你会做什么？90后女孩的回答当场被录用',
					totalnum:234,
					todaynum:123
				},
				tabBars:[
					{name: '默认',id: 'default'}, 
					{name: '最新', id: 'new'}
				],
				tabIndex: 0,
				scrollStyle: 'border-bottom:0',
				scrollBlockStyle: 'width:50%',
				tabList:[
					{
						loadtext: '上拉加载更多',
						list:[
							// 文字
							{
								avatar: '../../static/images/logo.png',
								nickname: 'Zero',
								sex: 1, // 0：男，1：女
								age: 25,
								isfollow: false,
								title: '今天撸猫猫',
								cover: '',
								video: false,
								share: false,
								address: '苏州 虎丘',
								sharenum: 25,
								commentnum: 200,
								likenum:20
							},
							// 图文
							{
								avatar: '../../static/images/logo.png',
								nickname: 'Zero',
								sex: 0, // 0：男，1：女
								age: 25,
								isfollow: false,
								title: '今天撸猫猫',
								cover: '../../static/images/shuijiao.jpg',
								video: false,
								share: false,
								address: '苏州 虎丘',
								sharenum: 25,
								commentnum: 200,
								likenum:20
							},
							// 视频
							{
								avatar: '../../static/images/logo.png',
								nickname: 'Zero',
								sex: 0, // 0：男，1：女
								age: 25,
								isfollow: true,
								title: '今天撸猫猫',
								cover: '../../static/images/shuijiao.jpg',
								video: {
									looknum: '20W',
									time: '2:40'
								},
								share: false,
								address: '苏州 虎丘',
								sharenum: 25,
								commentnum: 200,
								likenum:20
							},
							// 分享
							{
								avatar: '../../static/images/logo.png',
								nickname: 'Zero',
								sex: 0, // 0：男，1：女
								age: 25,
								isfollow: false,
								title: '今天撸猫猫',
								cover: '',
								video: false,
								share: {
									title: '分享标题',
									cover: '../../static/images/cbd.jpg'
								},
								address: '苏州 虎丘',
								sharenum: 25,
								commentnum: 200,
								likenum:20
							}
						]
					},
					{
						loadtext: '上拉加载更多',
						list:[
							// 文字
							{
								avatar: '../../static/images/logo.png',
								nickname: 'Zero',
								sex: 1, // 0：男，1：女
								age: 25,
								isfollow: false,
								title: '今天撸猫猫',
								cover: '',
								video: false,
								share: false,
								address: '苏州 虎丘',
								sharenum: 25,
								commentnum: 200,
								likenum:20
							},
							// 图文
							{
								avatar: '../../static/images/logo.png',
								nickname: 'Zero',
								sex: 0, // 0：男，1：女
								age: 25,
								isfollow: false,
								title: '今天撸猫猫',
								cover: '../../static/images/shuijiao.jpg',
								video: false,
								share: false,
								address: '苏州 虎丘',
								sharenum: 25,
								commentnum: 200,
								likenum:20
							},
							// 视频
							{
								avatar: '../../static/images/logo.png',
								nickname: 'Zero',
								sex: 0, // 0：男，1：女
								age: 25,
								isfollow: true,
								title: '今天撸猫猫',
								cover: '../../static/images/shuijiao.jpg',
								video: {
									looknum: '20W',
									time: '2:40'
								},
								share: false,
								address: '苏州 虎丘',
								sharenum: 25,
								commentnum: 200,
								likenum:20
							},
							// 分享
							{
								avatar: '../../static/images/logo.png',
								nickname: 'Zero',
								sex: 0, // 0：男，1：女
								age: 25,
								isfollow: false,
								title: '今天撸猫猫',
								cover: '',
								video: false,
								share: {
									title: '分享标题',
									cover: '../../static/images/cbd.jpg'
								},
								address: '苏州 虎丘',
								sharenum: 25,
								commentnum: 200,
								likenum:20
							}
						]
					}
				]
			}
		},
		/* 上拉触发页面到底事件 */
		onReachBottom() {
			this.loadmore();
		},
		/* 下拉刷新事件 */
		onPullDownRefresh() {
			this.pullDownGetData();
		},
		methods: {
			tabtap(index){
				this.tabIndex = index
			},
			/* 下拉刷新 */
			pullDownGetData(){
				// 1、获取数据
				
				// 3、关闭下拉刷新
				setTimeout(() => {
					let arr = [
						// 文字
						{
							avatar: '../../static/images/logo.png',
							nickname: '拜登',
							sex: 0, // 0：男，1：女
							age: 56,
							isfollow: false,
							title: '老子是总统了',
							cover: '',
							video: false,
							share: false,
							address: '美国 白宫',
							sharenum: 40000,
							commentnum: 20000,
							likenum:1999
						},
						// 图文
						{
							avatar: '../../static/images/logo.png',
							nickname: '贾如',
							sex: 1, // 0：男，1：女
							age: 25,
							isfollow: false,
							title: '西红市首富疯了',
							cover: '../../static/images/cbd.jpg',
							video: false,
							share: false,
							address: '西虹市 虎丘',
							sharenum: 300000,
							commentnum: 50000,
							likenum:1000
						}
					]
					// 2、赋值
					this.tabList[this.tabIndex].list = arr;
					uni.stopPullDownRefresh();
				},2000);
			},
			/* 上拉加载更多 */
			loadmore(){
				if(this.tabList[this.tabIndex].loadtext !== '上拉加载更多'){
					return;
				}
				// 修改加载状态
				this.tabList[this.tabIndex].loadtext = '加载中···';
				// 获取数据
				setTimeout(() => {
					var obj = {
						
					};
					// 获取完成
					this.tabList[this.tabIndex].loadtext = '上拉加载更多';
				}, 1000)
				
				
				// this.tabList[this.tabIndex].loadtext = '没有更多数据了';
			}
		}
	}
</script>

<style>
	
</style>
